<template>
    <div class="mainContain" id="rightBox" :style="{fontSize: `${fontsize}px`}" >
        <div class="phaseBox" :style="{height: `${fontsize * 3}px`}" >
            <div class="sub" style="left:0px; align-items: flex-start;">
                <div>{{ prevPhase }}</div>
                <div class="t ldNum" >{{ prevTime }}</div>
            </div>
            <div class="current">{{ currentPhase }}</div>
            <div class="sub" style="right:0px;">
                <div>{{nextPhase}}</div>
                <div class="t ldNum">{{nextTime}}</div>
            </div>

        </div>

        <div  class="tickBox">
            <div class="bar">
                <div class="barBar" :style="{ width: barPercent + '%' }"></div>
            </div>
        </div>
        <div class="tickBox2">
            <div class="tickLeft">{{prevTick}}</div>
            <div class="tickRight">{{nextTick}}</div>
        </div>
        <div class="clockBox ldNum" >
            <span class="hour">{{ clockTimeHour }}</span>
            <span :style="{color: colonColor}">:</span>
            <span class="minute">{{ clockTimeMinute }}</span>
            <span :style="{color: colonColor}">:</span>
            <span class="second">{{ clockTimeSecond }}</span>
        </div>
    </div>

</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { currentTimePhase, getSunTicks } from '../api';
import type { Setting } from '../App.vue';

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
dayjs.locale('zh-cn');
dayjs.extend(utc)
dayjs.extend(timezone)

const props = defineProps<{
    setting: Setting,
    scale: number,
}>();

const prevPhase = ref('');
const prevTime = ref('');
const prevTick = ref('');
const nextTick = ref('');
const currentPhase = ref('');
const nextPhase = ref('');
const nextTime = ref('');
const clockTimeHour = ref('')
const clockTimeMinute = ref('')
const clockTimeSecond = ref('');
const barPercent = ref(0);
const colonColor = ref('#CDCDCD')

const fontsize = ref(10);

const second2Time = (sec: number)=>{
    // 将秒数转为 HH:mm:ss字符串，正的加"+"，负的加"-"
    const sign = sec >= 0 ? '+' : '-';
    sec = Math.abs(sec);
    const hours = Math.floor(sec / 3600);
    const minutes = Math.floor((sec % 3600) / 60);
    const seconds = sec % 60;
    return `${sign}${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

}

const update = ()=>{
    const time = new Date();
    const sunTicks = getSunTicks(props.setting.latitude, props.setting.longitude, time);
    const phase = currentTimePhase(sunTicks);
    prevPhase.value = phase.previous.name;
    currentPhase.value = phase.current.name;
    nextPhase.value = phase.next.name;
    prevTick.value = phase.previousTick.name;
    nextTick.value = phase.nextTick.name;

    const pTime = dayjs(phase.previous.time)
    // 格式化为距离现在 -HH:mm:ss
    prevTime.value = second2Time(pTime.diff(time, 'second'));
    const nTime = dayjs(phase.next.time)
    nextTime.value = second2Time(nTime.diff(time, 'second'));

    const t = dayjs(time).tz('Asia/Shanghai');
    clockTimeHour.value = t.format('HH');
    clockTimeMinute.value = t.format('mm');
    clockTimeSecond.value = t.format('ss');

    const currentTime = dayjs(time);
    const prevTimeSec = Math.abs(pTime.diff(currentTime, 'second'));
    const nextTimeSec = Math.abs(nTime.diff(currentTime, 'second'));
    const totalTimeSec = prevTimeSec + nextTimeSec;
    barPercent.value = (prevTimeSec / totalTimeSec) * 100;
}

const setSize = ()=>{
    const width = document.getElementById('rightBox')?.clientWidth;
    if(width) {
        fontsize.value = width / 20;
    }
}

let timer = 0
let obs: ResizeObserver;

onMounted(() => {
    update();
    timer = window.setInterval(update, props.setting.clockInterval * 1000);

    obs = new ResizeObserver(setSize);
    obs.observe(document.getElementById('rightBox') as HTMLElement);
});

watch(() => props.setting, () => {
    if (timer) {
        window.clearInterval(timer);
    }
    update();
    timer = window.setInterval(update, props.setting.clockInterval * 1000);
}, { deep: true, immediate: true });

onBeforeUnmount(() => {
    if (timer) {
        window.clearInterval(timer);
    }
    obs.disconnect();
});

</script>

<style>
.mainContain {
  width: 100%;
  padding: 15px 0;
}
.phaseBox {
    width: 90%;
    height: 100px;
    position: relative;
    margin: 0 5%;
}
.divider{
    background-color:  #444;
    height: 1px;
    width: 100%;
}
.phaseBox .sub {
    font-size: 0.8em;
    line-height: 1.3em;
    color: #a9a9a9;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.phaseBox .sub .t {
    font-size: 0.8em;
}
.phaseBox .current {
    font-size: 1.8em;
    color: #f39238;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;

}
.clockBox{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4em;
    line-height: 1.1em;
    color: #999;
    font-weight: bold;
    margin-top: 20px;
    letter-spacing: 0.03em;
}

.tickBox{
    color: #c1c1c1;
    font-size: 1em;
    position: relative;
    height: 30px;
}

.bar{
    position: absolute;
    width: 90%;
    height: 0.7em;
    top: 0;
    left: 5%;
    background-color: #444;
    border-radius: 15px;
}
.barBar {
    height: 100%;
    background-color: #f39238;
    border-radius: 15px;
    transition: width 0.2s ease;
}
.tickBox2 {
    color: #c1c1c1;
    font-size: 0.8em;
    position: relative;
    width: 90%;
    display: flex;
    justify-content: space-between;
    color: #8c8c8c;
    margin:  0 5%;
}
.hour{
    color:#fca7c2;
}
.minute{
    color: #94e14d;
}
.second{
    color: #6abff3;
}
</style>